<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>问题反馈列表</title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/mui.min.js"></script>
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/sm3.js"></script>
    <!-- <script src="../js/feedback.js"></script> -->
    <script src="../js/clipboard.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../wx/uap.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
</head>
<style>
    #app {
        width: 100%;
        height: 100%;
        background-color: #fff;
        /* height: calc(100% + 0.8rem - env(safe-area-inset-bottom)) */
        height: calc(100% - constant(safe-area-inset-bottom));
        height: calc(100% - env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-image: url("../image/back_home.png");
        background-size: 100%;
    }

    .van-nav-bar__left,
    .van-nav-bar__right {
        position: relative;
    }

    .van-nav-bar {

        background: none !important;
    }

    .van-nav-bar__content {
        display: flex;
        justify-content: space-between;
    }

    .questBox {
        width: 100%;
        flex: 1;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
        /* background-color: red; */
    }

    .trainTickets {
        display: flex;
        flex-direction: column;

    }

    .questList {

        padding: 0 .3rem;
        /* flex: 1; */
        height: calc(100% -1rem);
        overflow: auto;
    }

    .questList .questCard:nth-child(1) {
        border-top: 1px solid #e4e4e4;

        justify-content: space-between;
    }

    .questCard {
        width: 100%;
        height: 1.8rem;
        display: flex;
        border-bottom: 1px solid #e4e4e4;

        justify-content: space-between;
    }

    .questContent {
        flex: 1;
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .questCard_img_box {
        width: 0.4rem;
        height: 0.4rem;

    }

    .questCard_img_box img {
        width: 100%;
        height: 100%;

    }

    .questCard_checked,
    .questCard_img {
        display: flex;
        width: 8%;
        justify-items: center;
        align-items: center;
    }

    .questCard_checked,
    .van-checkbox {
        margin-right: 0 !important;
    }

    .questContent_content {
        font-size: 16px;
        margin-bottom: .1rem;
        color: #000000;
    }

    .questContent_time {
        color: #666666;
        font-size: 14px;
    }

    .msg-bottom {
        display: flex;
        height: 1.5rem;
        /* position: absolute; */
        /* bottom: 0rem; */
        /* left: -.3rem; */
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: 100%;
        box-shadow: 3px 5px 5px 2px #3d3f41, -1px 5px 5px 2px #F2F8FF;
    }

    .msg-bottom-left {
        padding-left: 16px;
        flex-grow: 1;
        margin-left: auto;
        height: 32px;
    }

    .msg-checkbox {
        height: 32px;
        width: 1.5rem;
    }

    .msg-bottom-right {
        padding-right: 16px;
        height: 32px;
    }

    .msg-bottom-right .van-button {
        padding: 3px 16px 0;
        font-size: 15px;
        background-color: #e4e4e4;
        border-radius: 8px;

    }

    .msg-bottom-right .van-icon__image {
        width: .8em;
        height: .9em;
    }

    .msg-bottom-left .van-checkbox__icon,
    .questCard_checked .van-checkbox__icon {
        font-size: 18px !important
    }
</style>

<body>
    <div id="app">
        <div class="is-loading">
            <div class="is-loading">
                <div class="curtain">
                    <div class="loadingBgc">
                        <div class="loader"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="trainTickets" style="height: calc(100%)">
            <div class="header_tit" style=" padding: 0 .3rem;">
                <van-nav-bar title="问题反馈" left-arrow>
                    <template #left>
                        <div class="back_l active-brightness" @click="home">
                            <img src="../image/left.png" alt="" />
                        </div>
                    </template>
                    <template #right>
                        <div class="" v-if="!showCheck" @click="checkoutFun">
                            多选
                        </div>
                        <div class="" v-if="showCheck" @click="handleMultiChooseCancel">
                            取消
                        </div>
                    </template>
                </van-nav-bar>
            </div>
            <div class="questBox">
                <div class="questList">
                    <van-checkbox-group v-model="checkMsgData">
                        <div class="questCard" v-for="(item,index) in cardList">
                            <div class="questContent" @click="defaultID(item.id)">
                                <div class="questContent_content"> {{item.text | fileNametext}}</div>
                                <div class="questContent_time">{{item.createTime}}</div>

                            </div>

                            <div class="questCard_checked" @click="toggle(index,item)" v-show="showCheck">
                                <van-checkbox ref="checkboxes" :name="item"></van-checkbox>
                            </div>
                            <div class="questCard_img" v-show="!showCheck">
                                <div class="questCard_img_box"><img src="../image/right.png" alt=""></div>
                            </div>
                        </div>
                    </van-checkbox-group>
                </div>
                <div class="msg-bottom" v-if="showCheck">
                    <div class="msg-bottom-left">
                        <van-checkbox class="msg-checkbox" v-model="chooseAll" @click="chooseMsgAllClick"
                            icon-size="24px">全选</van-checkbox>
                    </div>
                    <div class="msg-bottom-right">
                        <van-button icon="../image/del3.png" type="" size="small" @click="handleDeleteMsg">删除
                        </van-button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        new Vue({
            el: '#app',

            data() {
                let jsApiList = [];
                $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , function () {
                    'use strict';
                    wx.ready(function () {});
                    jsApiList = [
                        'startRecordVoiceBuffer',
                        'onRecordBufferReceived',
                        'stopRecord',
                    ];
                    wx.config({
                        beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                        debug: false,
                        appId: appid,
                        timestamp: '1626832073', // 必填，生成签名的时间戳
                        nonceStr: nonceStr, // 必填，生成签名的随机串
                        signature: 'fb9f560a9b4824f7db3525926994010de74ea055', // 必填，签名，见附录1
                        jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                });
                // })
                return {
                    chooseAll: false,
                    multiChoose: true,
                    showCheck: false,
                    content: '',
                    selectedList: [],
                    checkMsgData: [], //数据的长度
                    emptyImgSearch: "../image/empty-image-search.png",
                    cardList: [
                        // {
                        //     content: '等个风格感等个风格感等个风格感等个风格感觉我反馈我管理科费劲 问',
                        //     id: "1",
                        //     startTime: "2021-07-01 14:00"
                        // }, 
                        // {
                        //     id: "2",
                        //     content: '2333等个风格感觉我反馈我管理科费劲',
                        //     startTime: "2021-07-01 14:00"
                        // }, {
                        //     id: "3",
                        //     content: '333等个风格感觉我反馈我管理科费劲',
                        //     startTime: "2021-07-01 14:00"
                        // }, {
                        //     id: 4,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // }, {
                        //     id: 43,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // },
                        // {
                        //     id: 41,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // }, {
                        //     id: 433,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // },
                        // {
                        //     id: 44,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // }, {
                        //     id: 455,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // }, {
                        //     id: 47,
                        //     content: '客户端可交换机核发开户行客家话看',
                        //     startTime: "2021-07-01 14:00"
                        // },
                    ]
                }
            },
            filters: {
                fileNametext: (value) => {
                    if (!value) return "";
                    let data = value.split("");
                    if (data.length < 16) {
                        return value;
                    }
                    return value.slice(0, 16) + "...";
                },
            },
            mounted() {
                this.onSearch()
            },
            methods: {
                defaultID(id){
                    sessionStorage.setItem("historyDes", id)
                    $(location).attr("href", "problemDetails.html");

                  },
              // 取消
                handleMultiChooseCancel() {
                    this.showCheck = false
                    this.chooseAll = false
                    this.checkMsgData = []
                },
                handleDeleteMsg() {
                    // 删除
                    console.log(this.checkMsgData, 888)
                    if (this.checkMsgData.length == 0) {
                        mui.toast("请选择要删除的记录", {
                            duration: "long",
                            type: "div"
                        });
                        return
                    }
                    // $(".curtain").css("display", "block");
                    userId = sessionStorage.getItem("userId");
                    iscp_port = sessionStorage.getItem("iscp_port") || "";
                    const timestamp = new Date().getTime() + ""
                    const orgId = sessionStorage.getItem("unitId");
                    let data = {
                        "timestamp": timestamp,
                        "ids": JSON.stringify(this.extractIdsToArray(this.checkMsgData))
                    };
                    data = JSON.stringify(data)
                    let sign = sm3(data);
                    let AuthenticationSession = sessionStorage.getItem("Authentication");
                    $.ajax({
                        url: localUrlLink + iscp_port + "/tjAiAssistant/defect/deleteDefectRecordById",
                        type: "post",
                        // async: true, //是否同步，false表示同步请求
                        dataType: "json",
                        data: data,
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                            Authentication: AuthenticationSession,
                            sign: sign,
                            timestamp: timestamp
                        },
                        success: (res, txt, xhr) => {
                            if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                                let Authentication = xhr.getResponseHeader("Authentication")
                                if (res.code == 200) {
                                    if (Authentication) {
                                        $(".curtain").css("display", "none");
                                        sessionStorage.setItem("Authentication", Authentication);
                                        $(".curtain").css("display", "none");
                                        mui.toast("删除成功", {
                                            duration: 'long',
                                            type: 'div'
                                        })
                                        this.onSearch()
                                    }
                                } else {
                                    $(".curtain").css("display", "none");
                                    mui.toast(res.resultValue, {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                }
                            } else {
                                $(".curtain").css("display", "none");
                                mui.toast('完整性校验失败', {
                                    duration: 1000,
                                    type: 'div'
                                })
                            }
                        },
                        error: (e) => {
                            $(".curtain").css("display", "none");
                            mui.toast('请求异常,请稍后再试', {
                                duration: 1000,
                                type: 'div'
                            })
                        },
                    });
                },
                extractIdsToArray(dataArray) {
                    // 提取所有id并组成新数组
                    return dataArray.map(item => {
                        // 容错处理：如果元素没有id属性，返回空字符串或其他默认值
                        return item ?.id ?? '';
                    }).filter(id => id); // 过滤掉空值（可选，根据需求决定是否保留）
                },

                toggle(index, checkItem) {
                    if (this.showCheck) {
                        const exist = this.checkMsgData.some(item => item.id === checkItem.id)
                        if (!exist) {
                            //选中,且全部选中
                            if (this.checkMsgData.length + 1 == this.cardList.length) {
                                console.log("全部选中", this.checkMsgData, this.cardList)

                                this.chooseAll = true
                            }
                        } else {
                            console.log("没有全部选中")
                            this.chooseAll = false
                        }
                        this.$refs.checkboxes[index].toggle()
                    } else {
                        if (checkItem['expand']) {
                            this.$set(checkItem, 'expand', false)
                        } else {
                            // checkItem['expand'] = true
                            this.$set(checkItem, 'expand', true)
                        }
                    }
                },
                chooseMsgAllClick(event) {
                    if (this.chooseAll) {
                        this.$refs.checkboxes.forEach(item => {
                            item.toggle(true);
                        })
                    } else {
                        this.$refs.checkboxes.forEach(item => {
                            item.toggle(false);
                        })
                    }
                },
                checkoutFun() {
                    this.cardList.forEach(item => {
                        this.$set(item, 'expand', false)
                    })
                    this.showCheck = true

                },
                onSearch() {
                    // $(".curtain").css("display", "block");
                    userId = sessionStorage.getItem("userId");
                    iscp_port = sessionStorage.getItem("iscp_port") || "";
                    const timestamp = new Date().getTime() + ""
                    const orgId = sessionStorage.getItem("unitId");
                    let data = {
                        "userId": userId,
                        "orgId": orgId,
                        "timestamp": timestamp,
                    };
                    data = JSON.stringify(data)
                    let sign = sm3(data);
                    let AuthenticationSession = sessionStorage.getItem("Authentication");
                    $.ajax({
                        url: localUrlLink + iscp_port + "/tjAiAssistant/defect/queryDefectRecordList",
                        type: "post",
                        // async: true, //是否同步，false表示同步请求
                        dataType: "json",
                        data: data,
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                            Authentication: AuthenticationSession,
                            sign: sign,
                            timestamp: timestamp
                        },
                        success: (res, txt, xhr) => {
                            if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                                let Authentication = xhr.getResponseHeader("Authentication")
                                if (res.code == 200) {
                                    if (Authentication) {
                                        $(".curtain").css("display", "none");
                                        sessionStorage.setItem("Authentication", Authentication);
                                        this.cardList = res.resultValue
                                    }
                                } else {
                                    $(".curtain").css("display", "none");
                                    mui.toast(res.resultValue, {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                }
                            } else {
                                $(".curtain").css("display", "none");
                                mui.toast('完整性校验失败', {
                                    duration: 1000,
                                    type: 'div'
                                })
                            }
                        },
                        error: (e) => {
                            $(".curtain").css("display", "none");
                            mui.toast('请求异常,请稍后再试', {
                                duration: 1000,
                                type: 'div'
                            })
                        },
                    });
                },
                home() {
                    $(location).attr("href", "Home.html");
                },

            }
        })
    </script>
</body>

</html>